<template>
   <div class="main">
      <!-- film有数据则显示影片详情 -->
      <div
         v-if="film"
         class="film"
         data-enter-time="1669357608">

         <!-- 详情页导航条 -->
         <div class="film-header show-film-header">
            <!-- 点击返回 -->
            <div
               class="goBack"
               @click="$router.back()">
               <img
                  src=""
                  alt="" />
            </div>

            <!-- 给导航条中的标题元素添加ref，以便后续捕获这个元素 -->
            <div
               class="title"
               ref="refTitle">
               {{ film.name }}
            </div>
         </div>

         <!-- poster -->
         <div
            data-v-21c202bd=""
            class="lazy-img film-poster"
            alt="filmPoster"
            style="width: 100%; background: rgb(249, 249, 249)">
            <div
               data-v-21c202bd=""
               class="padding"
               style="width: 100%; background: rgb(249, 249, 249)">
               <img
                  data-v-21c202bd=""
                  src="/imgs/maizuo_padding.7c6a7f11.png"
                  width="64px"
                  alt="img" />
            </div>
            <div
               data-v-21c202bd=""
               class="lazy-img-wrap"
               style="width: 100%; background: rgb(249, 249, 249); opacity: 1; display: block">
               <img
                  data-v-21c202bd=""
                  :src="film.poster"
                  class="target-img" />
            </div>
         </div>

         <!-- 影片详情 -->
         <div class="film-detail">
            <div class="col">
               <div class="film-name">
                  <span class="name">{{ film.name }}</span
                  ><span class="item">{{ film.filmType.name }}</span>
               </div>
               <div class="film-grade">
                  <span class="grade">{{ film.grade }}</span
                  ><span class="grade-text">分</span>
               </div>
            </div>
            <div class="film-category grey-text">{{ film.category }}</div>
            <div class="film-premiere-time grey-text">
               {{ new Date(film.premiereAt * 1000).toLocaleDateString().replaceAll("/", "-") }}上映
            </div>
            <div class="film-nation-runtime grey-text">
               {{ film.nation }} | {{ film.runtime }}分钟
            </div>

            <!-- 影片摘要 -->
            <!-- 
            // 我们让摘要元素的高度随着hideSynopsis的真假与与否动态变化
            // 当hideSynopsis为true时 高度为60px 此时为折叠态
            // 当hideSynopsis为false时 高度为动态计算的充分展开高度 此时为展开态
            :style="{
               height: hideSynopsis ? '60px' : `${Math.ceil(film.synopsis.length / 28) * 18}px`,
            }"
             -->
            <div
               id="synopsis"
               class="film-synopsis grey-text"
               :style="{
                  height: hideSynopsis ? '60px' : `${Math.ceil(film.synopsis.length / 28) * 18}px`,
               }"
            >
               {{ film.synopsis }}
            </div>

            <!-- 点击toggle按钮时 动态切换hideSynopsis的真假 -->
            <div
               class="toggle"
               @click="hideSynopsis = !hideSynopsis">

               <!-- 隐藏时使用↓图标 -->
               <i
                  v-if="hideSynopsis"
                  class="fa fa-angle-down"
                  style="font-size: 20px"></i>

               <!-- 展开时使用↑图标 -->
               <i
                  v-else
                  class="fa fa-angle-up"
                  style="font-size: 20px"></i>
            </div>

         </div>

         <div class="actors">
            <div class="actors-title-bar">
               <span class="actors-title-text">演职人员</span>
            </div>
            <div
               data-v-2d80f9ec=""
               class="row-scroll-wrapper actors-list"
               style="height: 140px; background: rgb(255, 255, 255)">
               <!-- 演员列表 -->
               <ul
                  data-v-2d80f9ec=""
                  class="row-scroll-items-nav">
                  <li
                     v-for="actor in film.actors"
                     data-v-624f798e=""
                     class="row-scroll-item"
                     data-v-2d80f9ec=""
                     style="width: 85px; min-width: 85px">
                     <div
                        data-v-624f798e=""
                        class="actors-item"
                        style="text-align: center">
                        <div
                           data-v-21c202bd=""
                           class="lazy-img actors-img"
                           data-v-624f798e=""
                           style="width: 85px; height: 85px; background: rgb(249, 249, 249)">
                           <div
                              data-v-21c202bd=""
                              class="padding"
                              style="width: 85px; height: 85px; background: rgb(249, 249, 249)">
                              <img
                                 data-v-21c202bd=""
                                 src="/imgs/maizuo_padding.7c6a7f11.png"
                                 width="64px"
                                 alt="img" />
                           </div>
                           <div
                              data-v-21c202bd=""
                              class="lazy-img-wrap"
                              style="
                                 width: 85px;
                                 height: 85px;
                                 background: rgb(249, 249, 249);
                                 opacity: 1;
                                 display: block;
                              ">
                              <img
                                 data-v-21c202bd=""
                                 :src="actor.avatarAddress"
                                 class="target-img" />
                           </div>
                        </div>
                        <span
                           data-v-624f798e=""
                           class="actors-name"
                           >{{ actor.name }}</span
                        ><span
                           data-v-624f798e=""
                           class="actors-role"
                           >{{ actor.role }}</span
                        >
                     </div>
                  </li>

                  <li
                     data-v-2d80f9ec=""
                     class="padding-right-li"></li>
               </ul>
            </div>
         </div>

         <!-- 剧照 -->
         <div class="photos">
            <div class="photos-title-bar">
               <span class="photos-title-text">剧照</span
               ><span class="photos-to-all"
                  >全部({{ film.photos.length }})<i
                     class="iconfont icon-quanju_liebiaojiantou"
                     style="font-size: 13px"></i
               ></span>
            </div>
            <div
               data-v-2d80f9ec=""
               class="row-scroll-wrapper photos-list"
               style="height: 115px; background: rgb(255, 255, 255)">
               <ul
                  data-v-2d80f9ec=""
                  class="row-scroll-items-nav">
                  <li
                     v-for="url in film.photos"
                     data-v-624f798e=""
                     class="row-scroll-item photos-item-wrap"
                     data-v-2d80f9ec=""
                     style="width: 150px; min-width: 150px">
                     <div
                        data-v-624f798e=""
                        class="photos-item">
                        <div
                           data-v-21c202bd=""
                           class="lazy-img photos-img"
                           data-v-624f798e=""
                           style="width: 150px; height: 100px; background: rgb(249, 249, 249)">
                           <div
                              data-v-21c202bd=""
                              class="padding"
                              style="width: 150px; height: 100px; background: rgb(249, 249, 249)">
                              <img
                                 data-v-21c202bd=""
                                 src="/imgs/maizuo_padding.7c6a7f11.png"
                                 width="64px"
                                 alt="img" />
                           </div>
                           <div
                              data-v-21c202bd=""
                              class="lazy-img-wrap"
                              style="
                                 width: 150px;
                                 height: 100px;
                                 background: rgb(249, 249, 249);
                                 opacity: 1;
                                 display: block;
                              ">
                              <img
                                 data-v-21c202bd=""
                                 :src="url"
                                 class="target-img" />
                           </div>
                        </div>
                     </div>
                  </li>

                  <li
                     data-v-2d80f9ec=""
                     class="padding-right-li"></li>
               </ul>
            </div>
         </div>

        <!-- 选座购票 -->
         <a
            href="https://m.maizuo.com/v5/#/film/6147/cinemas"
            class=""
            style="height: 49px; position: fixed; bottom: 0px; width: 100%"
            ><div class="goSchedule">选座购票</div></a
         >
      </div>

      <!-- 没有加载到数据则显示Loading... -->
      <div v-if="!film">
         <h1 style="padding-top: 50px; text-align: center">Loading...</h1>
      </div>

      <!---->
   </div>
</template>

<script>
import { getDetail } from "@api/movieApi";

export default {
   data() {
      return {
         film: null,
         // 标题栏
         titleDom: null,
         hideSynopsis: true,
      };
   },

   /* 组件挂载时获取数据 */
   mounted() {
      /* 获取详情并渲染完毕后，逮到标题栏元素 */
      getDetail(this.$route.params.id).then(res => {
         console.log("res=", res);

         // 渲染页面（数据驱动视图）
         this.film = res;

         /*
         film对应的div元素在渲染完毕后会回调nextTick内的函数
         此时根据ref获取title元素
         */
         this.$nextTick(() => {
            this.titleDom = this.$refs.refTitle;
         });
      });

      /* 组件挂载完毕以后监听窗口的滚动事件 */
      const mainDom = document.querySelector("main");
      mainDom.onscroll = e => {
         // 如果标题栏尚未渲染完毕 就什么都不做
         if (!this.titleDom) return;

         // 实时main元素滚动的距离
         console.log("scroll", mainDom.scrollTop);

         /* 如果滚动距离超过50就白底黑字，否则透明 */
         if (mainDom.scrollTop > 50) {
            this.titleDom.style.backgroundColor = "white";
            this.titleDom.style.color = "black";
         } else {
            this.titleDom.style.backgroundColor = "transparent";
            this.titleDom.style.color = "transparent";
         }
      };
   },

   unmounted() {
      document.querySelector("main").onscroll = null;
      console.log("main的滚动监听已移除,内存已释放");
   },

   methods: {
      toggleSynopsisHide() {
         this.hideSynopsis = !this.hideSynopsis;
      },
   },
};
</script>

<style lang="scss" scoped>
@import "@assets/css/chunk-vendors.e5c27244.css";
@import "@assets/css/index.5406c541.css";
@import "@assets/css/chunk-1efea0e5.6d28a156.css";
@import "@assets/css/chunk-25310e43.19e5160a.css";

.title {
   padding: 0;
   background-color: transparent;
   color: transparent;

   // 当样式发生改变时使用动画
   transition: all 0.5s linear;
}

.film .actors .actors-name[data-v-e57ad4a9] {
   padding-top: 0;
   height: 20px;
}

.main {
   background-color: #eee;
}

.film .show-film-header[data-v-e57ad4a9]:after {
   border-bottom: none;
}

.film .show-film-header[data-v-e57ad4a9] {
   background-color: transparent;
}

.goBack {
   border-radius: 50%;
   background-color: rgba(200, 200, 200, 0.1);
   border: none;
}

// 摘要样式
#synopsis {
   // 为高度做动画
   transition: height 0.5s linear;

   // 高度以外的文字隐藏
   overflow: hidden;
}
</style>
